<template>
  <div class="security_page">
    <CommonHeader title="账户安全" />
    <div class="security_content page_no_tab_bar">
      <div>双重身份验证（2FA）</div>
      <div class="font_color">
        为保护您的账号安全，建议至少开启一种双重身份验证(2FA)
      </div>
      <ul class="security_list">
        <li
          v-for="(item, index) in securityList"
          :key="index"
          @click="goPage(item.path)"
        >
          <div class="left">
            <img :src="item.icon" alt="" />
            <span>{{ item.text }}</span>
          </div>
          <div class="right">
            <img src="@/assets/common/go_icon.png" alt="" />
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useRouter } from "vue-router";
import CommonHeader from "@/components/CommonHeader.vue";
import PswIcon from "@/assets/profile/security/psw_icon.png";
import DealIcon from "@/assets/profile/security/deal_icon.png";
import EmailIcon from "@/assets/profile/security/email_icon.png";
import GoogleAuthIcon from "@/assets/profile/security/google_auth_icon.png";

// 获取路由对象
const router = useRouter();
// 验证列表
const securityList = ref([
  { text: "修改登录密码", icon: PswIcon, path: "updatePsw" },
  { text: "重置登录密码", icon: PswIcon, path: "resetPsw" },
  { text: "设置交易密码", icon: DealIcon, path: "setDealPsw" },
  // { text: "更改邮箱", icon: EmailIcon, path: "updateEmail" },
  { text: "谷歌验证器", icon: GoogleAuthIcon, path: "googleAuth" },
]);

// 跳转指定页
const goPage = (path: string) => {
  router.push(`/profile/security/${path}`);
};
</script>

<style lang="scss" scoped>
.security_page {
  .security_content {
    padding-top: 10px;
    .font_color {
      font-size: 14px;
      margin: 15px 0;
    }
    .security_list {
      li {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px 10px;
        margin-bottom: 20px;
        background-color: #141515;
        border-radius: 10px;
        .left {
          display: flex;
          align-items: center;
          span {
            margin-left: 10px;
          }
        }
      }
    }
  }
}
</style>
